<template>
	<view class="container-dialInfo">
		<view class="dialInfo-item-box" v-for="(item,index) in nicList" :key="index">
			<view class="dialInfo-item-nav">
				<view class="network">
					<text>网卡：</text>
					<text>{{item.name}}</text>
				</view>
				<view class="rate">
					<text>速率：</text>
					<text>{{item.speed}}M</text>
				</view>
			</view>
			<view class="" style="font-size: 12px;color: #8c8c8c;margin: 10rpx 0;">
				共{{item.lineList.filter(item=>item.disabled).length}}条线路</view>
			<view class="dialInfo-table">
				<view class="tr bg-w">
					<view class="th flex-center">vlan id</view>
					<view class="th" style="width: 50%;">{{netType==1?'账号':'ip'}}</view>
					<view class="th" style="width: 50%;">{{netType==1?'密码':'网关'}}</view>
					<view class="th flex-center"><u-icon name="trash" color="#fe5102" size="22"></u-icon></view>
				</view>
				<view class="tr" v-for="(val,ind) in item.lineList" :key="ind">
					<view class="td flex-center"><input type="text" :focus="val.focus" :disabled="val.disabled"
							v-model="val.id" placeholder="请填写 ID" placeholder-class="table-placeholder"></view>
					<view class="td" style="width: 50%;"><input type="text" :disabled="val.disabled" v-model="val.user"
							:placeholder="netType==1?'请填写账号':'ip'" placeholder-class="table-placeholder"></view>
					<view class="td" style="width: 50%;"><input type="text" :disabled="val.disabled" v-model="val.pwd"
							:placeholder="netType==1?'请填写密码':'网关'" placeholder-class="table-placeholder"></view>
					<view class="td flex-center">
						<!-- <view class="flex-center" style="display: flex;" v-if="!add&&item.lineList.length===ind+1" @tap="handleAddVlan(val,index)"> -->
						<view class="flex-center" style="display: flex;" v-if="!val.disabled"
							@tap="handleAddVlan(val,index)">
							<u-icon name="checkmark-circle" color="#02b602" size="22"></u-icon>
						</view>
						<view class="flex-center" style="display: flex;" v-else>
							<view class="" @tap="handleEdit(val,ind,item.name)">
								<u-icon name="edit-pen" color="" size="22"></u-icon>
							</view>
							<view @tap="handleDeleteVlan(index,ind)">
								<u-icon name="trash" color="#fe5102" size="22"></u-icon>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="submit-btn">
				<view class="">
					<u-button @click="handleVlanAll(index)" type="warning" size="small" customStyle="width: 150rpx"
						color="#FE5102" shape="circle" text="批量填写"></u-button>
				</view>
			</view>
		</view>
		<view class="bottom">
			<u-button type="warning" :disabled="isNicShow" customStyle="width: 300rpx" color="#FE5102" shape="circle"
				text="开始拨号" @click="handleNext"></u-button>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" @close="close" @open="open" mode="center" :round="10" overlay closeable style=""
			:customStyle="{width:'700rpx',height:'550rpx'}">
			<view class="popup-box">
				<view class="item1">批量填写该网卡关联的</view>
				<view class="item2" v-if="netType==1">vlan-id 拨号账号 拨号密码</view>
				<view class="item2" v-else>vlan-id ip 网关</view>
				<view class="item3">
					<textarea name="" style="background-color: #f5f5f5;width: 100%;" v-model="value1" id=""
						maxlength="-1" placeholder="格式: 字段间用空格分开、多条换行、没有 vlan-id 填写0"></textarea>
					<!-- <u--textarea style="background-color: #f5f5f5;" confirmType="done" v-model="value1" placeholder="格式: 字段间用空格分开、多条换行、没有 vlan-id 填写null" 
						height="120" maxlength="-1" ref="textarea" focus cursor="200"></u--textarea> -->
				</view>
				<view class="popup-bottom">
					<text class="text">批量识别将覆盖该网卡所有拨号信息</text>
					<view class="btn-box">
						<view class="">
							<u-button @click="closeTextarea" color="#d0d0d0" size="small"
								customStyle="width: 80rpx;color:#141414;font-weight: 600;" shape="circle"
								text="清空"></u-button>
						</view>
						<view class="">
							<u-button @click="handleIdentify" type="warning" size="small" customStyle="width: 80rpx"
								color="#FE5102" shape="circle" text="识别"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="" v-if="isNicShow" style="margin-top: 300rpx;">
			<u-empty mode="search" text="未获取到网卡">
				<view class="" style="display: flex;align-items: center;margin: 30rpx;" @tap="handleNic(10)">
					<view class="">
						<u-icon name="reload" color="#FE5102" size="22"></u-icon>
					</view>
					<text class="" style="color: #8c8c8c;font-size: 14px;">
						刷新重试
					</text>
				</view>
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value1: '',
				searchVal: '',
				loading: false,
				add: false,
				sn: '',
				nicList: [],
				vlanActive: 0,
				errMsg: true,
				isNicShow: false,
				Times: 0,
				timeOut: null,
				focusObj: {},
				netType: ''
				// lineList:[{}]
			}
		},
		onLoad(options) {
			this.sn = options.sn
			this.netType = options.netType
			this.getNic()
		},
		onHide() {
			clearInterval(this.timeOut)
		},
		beforeDestroy() {
			clearInterval(this.timeOut)
		},
		methods: {
			// 刷新获取网卡
			handleNic(time) {
				const that = this
				if (that.Times <= 0) {
					that.Times = time
					this.getNic()
				} else {
					return that.$fun.msg('操作频繁')
				}
				const timeOut = setInterval(() => {
					that.Times--
					if (that.Times <= 0) {
						clearTimeout(timeOut)
					}
				}, 1000)

			},
			// 批量添加
			handleVlanAll(index) {
				this.show = true
				this.vlanActive = index
			},
			closeTextarea() {
				this.value1 = ''
			},
			// 批量添加识别
			handleIdentify() {
				const vlanData = this.value1.split(' ').join(',').split(('\n'))
				// let count = this.vlanActive ? parseInt(this.vlanActive + '01',10) : 1
				vlanData.forEach((v, i) => {
					const valArr = v.split(',')
					// if(valArr[0]==0){
					// 	valArr[0] = count
					// 	count++
					// }
					this.nicList[this.vlanActive].lineList[i] = {
						id: valArr[0],
						user: valArr[1],
						pwd: valArr[2],
						disabled: true,
						focus: false
					}

				})
				const newArr = this.nicList[this.vlanActive].lineList[this.nicList[this.vlanActive].lineList.length - 1]
				if (newArr.id && newArr.user && newArr.pwd) {
					this.nicList[this.vlanActive].lineList = [...this.nicList[this.vlanActive].lineList, {
						id: '',
						user: '',
						pwd: '',
						disabled: false,
						focus: true
					}]
				} else {
					this.nicList[this.vlanActive].lineList[this.nicList[this.vlanActive].lineList.length - 1] = {
						id: '',
						user: '',
						pwd: '',
						disabled: false,
						focus: true
					}
				}
				this.show = false
				this.closeTextarea()
			},
			handleAddVlan(val, i) {
				if (val.id && val.user && val.pwd) {
					val.disabled = true
				}
				if (!val.disabled) {
					return this.$fun.msg('请完善拨号信息')
				}
				console.log(this.nicList[i].lineList[this.nicList[i].lineList.length - 1].id);
				if (this.nicList[i].lineList[this.nicList[i].lineList.length - 1].id) {
					this.nicList[i].lineList = [...this.nicList[i].lineList, {
						id: '',
						user: '',
						pwd: '',
						disabled: false
					}]
				} else {}
			},
			// 修改
			handleEdit(val, i, name) {
				val.focus = false
				val.disabled = false
				setTimeout(() => {
					val.focus = true
				}, 100)
				console.log(val);
			},
			handleDeleteVlan(index, ind) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							that.nicList[index].lineList.splice(ind, 1)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 获取网卡信息
			async getNic() {
				try {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					const res = await this.$fun.ajax.post('butt/queryNic', {
						sn: this.sn
					})
					uni.hideLoading()
					if (res.code == 1) {
						res.data.forEach(i => {
							if (i.content && i.content.length) {
								i.lineList = i.content.map(val => {
									const [id, user, pwd] = val.split(',')
									return {
										id,
										user,
										pwd,
										disabled: true,
										focus: false
									}
								})
								i.lineList = [...i.lineList, {
									id: '',
									user: '',
									pwd: '',
									disabled: false,
									focus: true
								}]
							} else {
								i.lineList = [{
									id: '',
									user: '',
									pwd: '',
									disabled: false,
									focus: true
								}]
							}

						})
						console.log(123, res.data);
						this.nicList = res.data
						this.isNicShow = false
					} else {
						this.isNicShow = true
					}

				} catch (e) {
					// TODO handle the exception
					this.isNicShow = true
					uni.hideLoading()
				}

			},
			//开始拨号
			async handleNext() {
				const that = this
				try {
					this.nicList.forEach((item) => {
						const newlist = item.lineList.filter(val => val.disabled)
						const newContent = newlist.map(val => `${val.id},${val.user},${val.pwd}`)
						item.content = newContent
						// item.lineList.forEach((v)=>{
						// const arr1 = Object.keys(v)
						// if(v.id&&v.user&&v.pwd){
						// 	v.content = `${v.id},${v.user},${v.pwd}`
						// 	item.content.push(v.content)
						// 	console.log(item);
						// 	that.errMsg = false
						// }else if(!arr1.length){
						// 	// that.errMsg = false
						// }else{
						// 	// v.content = ''
						// 	that.$fun.msg('请完善拨号信息')
						// 	that.errMsg = true
						// 	throw 'errMsg'
						// }
						// })
					})
				} catch (e) {
					//TODO handle the exception
				}

				const newNicList = this.nicList.map(item => {
					return {
						nicMac: item.mac,
						content: item.content
					}
				})
				const formData = {
					sn: this.sn,
					nicList: newNicList
				}
				const msgVal = formData.nicList.find(item => item.content.length >= 1)
				if (!msgVal) {
					return this.$fun.msg('请完善拨号信息')
				}
				const res = await this.$fun.ajax.post('butt/addVlanInfo', formData, 'application/json')
				if (res && res.code == 1) {
					this.$fun.jump(`/pageC/dialResult/dialResult?sn=${this.sn}`, 2)
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
		}
	}
</script>
<style>
	/* #ifndef H5 */
	/* page {
	padding-top: 85px;
} */
	/* #endif */
	.uni-group {
		display: flex;
		align-items: center;
	}
</style>
<style lang="scss">
	page {
		background: #EEEEEE;
	}

	.container-dialInfo {
		padding: 20rpx 20rpx 100rpx 20rpx;
		height: 100%;

		.dialInfo-item-box {
			margin-bottom: 30rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.dialInfo-item-nav {
				display: flex;
				font-size: 14px;

				.network {
					margin-right: 20rpx;
					color: #FE5102;
				}

				.rate {}
			}

			.dialInfo-table {
				font-size: 28rpx;

				.tr {
					display: flex;
					width: 100%;
					justify-content: center;
					height: 60rpx;
					align-items: center;
					border-radius: 10rpx;
				}

				.td {
					width: 40%;
					// justify-content: center;
					// text-align: center;
					overflow: hidden;
					margin: 0 10rpx;
					font-size: 28rpx;
				}

				.flex-center {
					justify-content: center;
					// text-align: center;
				}

				.th {
					width: 40%;
					color: #000;
					display: flex;
					height: 3rem;
					align-items: center;
					overflow: hidden;
					margin: 0 10rpx;
				}

				.bg-w {
					background: #f0f0f0;
				}

				th {
					font-weight: 400;
				}

				.table-placeholder {
					font-size: 14px;
				}

				.delete {
					.u-icon--right {
						flex-direction: column;
					}
				}
			}

			.submit-btn {
				margin-top: 10rpx;
				font-size: 14px;
				display: flex;
				justify-content: flex-end;
			}
		}

		.bottom {
			background-color: #fff;
			height: 120rpx;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			right: 0;
			padding-top: 20rpx;

		}

		.popup-box {
			padding: 10rpx 20rpx;
			position: relative;
			height: 100%;

			.item1 {
				font-size: 14px;
				font-weight: 700;
				margin: 5rpx 0;
			}

			.item2 {
				font-size: 12px;
				color: #FE5102;
			}

			.item3 {
				margin: 30rpx 0;
				padding: 10rpx 0;
			}

			.popup-bottom {
				position: absolute;
				/* #ifdef MP-WEIXIN */
				bottom: -40rpx;
				/* #endif */
				/* #ifndef MP-WEIXIN */
				bottom: 20rpx;
				/* #endif */
				left: 20rpx;
				right: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					font-size: 12px;
					color: #fe020e;
					margin-right: 20rpx;
					white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis; /* 可选，当内容超出一行时，用省略号表示 */
				}

				.btn-box {
					flex: 1;
					display: flex;
					justify-content: space-between;

				}
			}
		}

	}
</style>